<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            width:20px;
            height:20px;
            line-height: 20px;
            list-style:none;
            border:1px solid #f0f;
            cursor: pointer;
            margin-top:20px;
            text-align:center;
        }
    </style>
</head>
<body>
<ul id="ul">
    <li class="e-li active" name="eli-1">1</li>
    <li class="e-li" name="eli-2">2</li>
    <li class="e-li">3</li>
    <li class="e-li">4</li>
</ul>
<p id="txt"></p>
</body>
<script>
    /**
     *
     addEventListener()方法特点：

     element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

     addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

     addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。

     注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。

     可以使用 removeEventListener() 来移除之前绑定过的事件。



     attachEvent()方法特点：
     attachEvent是 IE 有的方法，它不遵循W3C标准，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段
     而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

     attachEvent()是 后绑定先执行。

     绑定时间时，attachEvent必须带 on，如 onclick，onmouseover 等
     window.attachEvent('onload',function(){
        alert("页面加载成功");
        });


     event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件
     event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件


     在我们实际的项目里面，在使用原生js绑定事件的时候，大多数情况下会使用 addEventListener() ，
     因为目前来说很少有人使用低版本IE了，大多数项目不会要求兼容 IE6-8 。
     *
     */





    // 事件绑定 封装成为一个函数，兼容浏览器，包括IE6及以上
    function addEvent(element, eType, handle, bol) {
        if(element.addEventListener){           //如果支持addEventListener
            element.addEventListener(eType, handle, bol);
        }else if(element.attachEvent){          //如果支持attachEvent
            element.attachEvent("on"+eType, handle);
        }else{                                  //否则使用兼容的onclick绑定
            element["on"+eType] = handle;
        }
    }

    // 事件解绑
    function removeEvent(element, eType, handle, bol) {
        if(element.addEventListener){
            element.removeEventListener(eType, handle, bol);
        }else if(element.attachEvent){
            element.detachEvent("on"+eType, handle);
        }else{
            element["on"+eType] = null;
        }
    }

    // 阻止冒泡函数
    function stopPropagation(e) {
        e = e || window.event;
        if(e.stopPropagation) {
            //W3C 阻止冒泡方法
           e.stopPropagation();
        } else {
            //IE 阻止冒泡方法
            e.cancelBubble = true;
        }
       }

    // demo:
    addEvent(document,'click',function(e){
        var event = e || window.event;
        //火狐下的e.target相当于ie下的event.srcElement，表示产生事件的源。
        var target = event.target || event.srcElement;

        if(target.getAttribute('name')== 'eli-2'){
            document.getElementById("txt").innerHTML= target.innerHTML;
        }
        stopPropagation(e)
    })


</script>
</html>